/**
 * Created by kurry on 2017/8/20.
 */
import React from 'react';
import { Layout,Steps, message ,Form, Select, InputNumber, Collapse, Radio,
  Popover, Button, Upload, Icon,Input,DatePicker} from 'antd';
import './less/course.less';
import 'antd/dist/antd.css';
const { Header, Content} = Layout;
const Step = Steps.Step;
const FormItem = Form.Item;
const Option = Select.Option;
const {TextArea} = Input;
const RadioGroup = Radio.Group;
const Panel = Collapse.Panel;
const RangePicker = DatePicker.RangePicker;

import TransferComponent from './publicComponents/Transfer'
//定义步骤条上的文字
const steps = [{
  title: '基本信息',
  content: 'First-content',
}, {
  title: '课程详情',
  content: 'Second-content',
}, {
  title: '教学内容',
  content: 'Last-content',
}];

/*
 * course_id:课程id
 * course_tag:所属类目
 * is_free:是否免费
 * */

class Class extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      foundationalInfo: [
        {course_id: 1,is_free: '免费',tagName1:'考研',tagName2:'热门商品',chapterName:'第 1 节 极限',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'},mission:{}},
      ],
      chapterPanelData: [
        {id:1,chapterName:'第 1 节 极限',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'},mission:{}},
        {id:2,chapterName:'第 2 节 函数',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
        {id:3,chapterName:'第 3 节 压马路',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
        {id:4,chapterName:'第 4 节 耍点酷',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
        {id:5,chapterName:'第 5 节 粗麻布',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
      ],
      classPanelData: [
        {id:1,chapterName:'第 1 节 极限',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'},mission:{}},
        {id:2,chapterName:'第 2 节 函数',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
        {id:3,chapterName:'第 3 节 压马路',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
        {id:4,chapterName:'第 4 节 耍点酷',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
        {id:5,chapterName:'第 5 节 粗麻布',mission:{classroomName:'强化班',enrollment: 25, price:1222,classBriefing:'我是来自四川的一个小山村'}},
      ],
    };
  }

  componentWillMount(){

  }
  //控制导航条的函数们
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  //表单控制函数们
  //第一次提交
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  //第二次提交
  handleSubmit2 = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  //增加新的章节面板
  addNewPanel = ()=>{
    const newchapterPanelData = this.state.chapterPanelData;
    newchapterPanelData.push({id:newchapterPanelData.length + 1,chapterName:`第 ${newchapterPanelData.length + 1} 节 新增章节`, mission:{
      classroomName:'强化班',
      enrollment: 25,
      price:1222,
      classBriefing:'我是来自四川的一个小山村'
    }});
    this.setState({
      chapterPanelData:newchapterPanelData
    })
  };
  //复制一个新的章节
  copyAPanel = ()=>{
    const newchapterPanelData = this.state.chapterPanelData;
    const theNewItem = {id:newchapterPanelData.length + 1,chapterName:`第 ${newchapterPanelData.length + 1} 节 新增章节`, mission:newchapterPanelData[newchapterPanelData.length - 1].mission};
    newchapterPanelData.push(theNewItem);

    this.setState({
      chapterPanelData:newchapterPanelData
    })
  };

  render() {
    const { current } = this.state;
    console.log(current);
    //获取装饰器
    const { getFieldDecorator } = this.props.form;
    // 表单的布局
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    //面板的样式
    const customPanelStyle = {
      background: '#f7f7f7',
      borderRadius: 4,
      marginBottom: 24,
      border: 0,
    };

    //穿梭框的参数们

    const text1 = <span>老师列表</span>;
    const content1 = (
      <div>
        <TransferComponent />
      </div>
    );

    const text2 = <span>资料列表</span>;
    const content2 = (
      <div>
        <TransferComponent />
      </div>
    );


    //新建班级折叠板参数
    const classPanels = this.state.classPanelData.map(item=>{
      return (
        <Panel header={item.chapterName} key={item.id} style={customPanelStyle}>
          <div className="class-panel-body">
            <Form onSubmit={this.handleSubmit2}>

              {/*班级名称*/}
              <FormItem
                {...formItemLayout}
                label="班级名称"
                hasFeedback
              >
                {getFieldDecorator('classroomName', {
                  rules: [{
                    required: true,
                    message: '请输入准确的班级名称',
                  }],
                })(
                  <Input placeholder="请输入准确的班级名称" />
                )}
              </FormItem>

              {/*招生人数*/}
              <FormItem
                {...formItemLayout}
                label="招生人数"
                hasFeedback
              >
                {getFieldDecorator('enrollment', {
                  initialValue: 30,
                  rules: [{
                    required: true,
                    message: '请输入招生人数',
                  }], })(
                  <InputNumber min={1} max={2000} />
                )}
                <span className="ant-form-text"> 人</span>
              </FormItem>

              {/*价格*/}
              <FormItem
                {...formItemLayout}
                label="价格"
                hasFeedback
              >
                {getFieldDecorator('price', {
                  initialValue: 100,
                  rules: [{
                    required: true,
                    message: '请输入价格',
                  }], })(
                  <InputNumber min={1} max={20000} />
                )}
                <span className="ant-form-text"> RMB</span>
              </FormItem>

              {/*简介*/}
              <FormItem
                {...formItemLayout}
                label="课程简介"
                hasFeedback
              >
                {getFieldDecorator('classBriefing', {
                  rules: [{required: true, message: '请输入此课程的简介!', whitespace: true}]
                })(
                  <TextArea placeholder="请输入此课程的简介"/>
                )}
              </FormItem>

              {/*按钮集中*/}
              <FormItem
                wrapperCol={{ span: 12, offset: 6 }}
              >
                <div className="steps-action">
                  {
                    <Button type="primary" htmlType="submit" onClick={() => message.success('Processing complete!')}>暂存</Button>
                  }
                  {
                    <Button  style={{ marginLeft: 8 }} onClick={() =>{
                      message.success('复制成功!');
                      this.copyAPanel()
                    }}>复制</Button>
                  }
                  {
                    <Button type="danger" style={{ marginLeft: 8 }} onClick={() => message.success('删除成功!')}>删除</Button>
                  }
                </div>

              </FormItem>
            </Form>
          </div>
        </Panel>
      )
    });

    //教学内容折叠板参数
    const chapterPanels = this.state.chapterPanelData.map(item=>{
      return (
            <Panel header={item.chapterName} key={item.id} style={customPanelStyle}>
              <div className="class-panel-body">
                <Form onSubmit={this.handleSubmit2}>

                  {/*任务类型*/}
                  <FormItem
                    {...formItemLayout}
                    label="任务类型"
                    hasFeedback
                  >
                    {getFieldDecorator('teacher', {
                      rules: [
                        { required: true, message: '请选择此任务的类型!' },
                      ],
                    })(
                      <Select placeholder="请选择此任务的类型" style={{width:'33.33%'}}>
                        <Option value="china">看视频</Option>
                        <Option value="use">做作业</Option>
                      </Select>
                    )}

                  </FormItem>

                  {/*任务名称*/}
                  <FormItem
                    {...formItemLayout}
                    label="任务名称"
                    hasFeedback
                  >
                    {getFieldDecorator('classroomName', {
                      rules: [{
                        required: true,
                        message: '请输入任务名称',
                      }],
                    })(
                      <Input placeholder="请输入任务名称" />
                    )}
                  </FormItem>

                  {/*关联视频*/}
                  <FormItem
                    {...formItemLayout}
                    label="关联视频"
                    hasFeedback
                  >
                    {getFieldDecorator('classroomIncludingVideo', {
                      rules: [
                        { required: true, message: '请选择此课程关联的视频!' },
                      ],
                    })(
                      <Popover placement="bottom" title={text1} content={content1} trigger="click">
                        <Input placeholder="请选择此课程关联的视频" style={{width:'100%'}}>
                        </Input>
                      </Popover>
                    )}

                  </FormItem>

                  {/*关联班级*/}
                  <FormItem
                    {...formItemLayout}
                    label="关联班级"
                    hasFeedback
                  >
                    {getFieldDecorator('classroomIncludingMission', {
                      rules: [
                        { required: true, message: '请选择此课程关联的班级!' },
                      ],
                    })(
                      <Popover placement="bottom" title={text1} content={content1} trigger="click">
                        <Input placeholder="请选择此课程关联的班级" style={{width:'100%'}}>
                        </Input>
                      </Popover>
                    )}

                  </FormItem>

                  {/*关联老师*/}
                  <FormItem
                    {...formItemLayout}
                    label="关联老师"
                    hasFeedback
                  >
                    {getFieldDecorator('classroomIncludingTeacher', {
                      rules: [
                        { required: true, message: '请选择此课程关联的老师!' },
                      ],
                    })(
                      <Popover placement="bottom" title={text1} content={content1} trigger="click">
                        <Input placeholder="请选择此课程关联的老师" style={{width:'100%'}}>
                        </Input>
                      </Popover>
                    )}

                  </FormItem>

                  {/*关联资料*/}
                  <FormItem
                    {...formItemLayout}
                    label="关联资料"
                    hasFeedback
                  >
                    {getFieldDecorator('reviewInformation', {
                      rules: [
                        { required: true, message: '请选择此课程的资料!' },
                      ],
                    })(
                      <Popover placement="bottom" title={text2} content={content2} trigger="click">
                        <Input placeholder="请选择此课程的资料" style={{width:'100%'}}>
                        </Input>
                      </Popover>
                    )}

                  </FormItem>

                  {/*选择直播、任务时区间*/}
                  <FormItem
                    {...formItemLayout}
                    label="任务时间（开始-结束）"
                  >
                    {getFieldDecorator('timeRangeToFinishMission', {rules: [{ type: 'array', required: true, message: '请选择任务开始和结束时间!' }]})(
                      <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    )}
                  </FormItem>

                  {/*按钮集中*/}
                  <FormItem
                    wrapperCol={{ span: 12, offset: 6 }}
                  >
                    <div className="steps-action">
                      {
                        this.state.current < steps.length - 1
                        &&
                        <Button type="primary" htmlType="submit" onClick={() => this.next()}>下一步</Button>
                      }
                      {
                        <Button type="primary" htmlType="submit" onClick={() => message.success('Processing complete!')}>暂存</Button>
                      }
                      {
                        <Button  style={{ marginLeft: 8 }} onClick={() =>{
                          message.success('复制成功!');
                          this.copyAPanel()
                        }}>复制</Button>
                      }
                      {
                        <Button type="danger" style={{ marginLeft: 8 }} onClick={() => message.success('删除成功!')}>删除</Button>
                      }
                    </div>

                  </FormItem>
                </Form>
              </div>
            </Panel>
      )
    });



    return (
      <div>
        <Header style={{ background: '#fff',padding:'0px 80px'}} className="class-nav-parent">
            <Steps current={current}>
              {steps.map(item => <Step key={item.title} title={item.title} />)}
            </Steps>
        </Header>
        <Content style={{ margin: '24px 16px 0' }}>
          {
            this.state.current  == 0
            &&
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              <Form onSubmit={this.handleSubmit}>

                {/*课程名称*/}
                <FormItem
                  {...formItemLayout}
                  label="课程名称"
                  hasFeedback
                >
                  {getFieldDecorator('name', {
                    rules: [{
                      required: true,
                      message: '请输入准确的课程名称',
                    }],
                  })(
                    <Input placeholder="请输入准确的课程名称" />
                  )}
                </FormItem>

                {/*是否收费*/}
                <FormItem
                  {...formItemLayout}
                  label="是否收费"
                  hasFeedback
                >
                  {getFieldDecorator('isNeedMoney', {
                    rules: [
                      { required: true, message: '请确认是否收费!' },
                    ],
                  })(
                    <RadioGroup>
                      <Radio value="chargeable">收费</Radio>
                      <Radio value="free">免费</Radio>
                    </RadioGroup>
                  )}
                </FormItem>

                {/*所属类目*/}
                <FormItem
                  {...formItemLayout}
                  label="所属类目"
                  hasFeedback
                >
                  {getFieldDecorator('type', {
                    rules: [
                      { required: true, message: '请输入课程名称!' },
                    ],
                  })(
                    <Select placeholder="升学·考研" style={{width:'33.33%'}}>
                      <Option value="china">升学考研</Option>
                      <Option value="use">IT培训</Option>
                    </Select>
                  )}
                  <Select placeholder="考研" style={{width:'33.33%'}}>
                    <Option value="china">考研</Option>
                    <Option value="use">四六级</Option>
                  </Select>
                  <Select placeholder="英语" style={{width:'33.33%'}}>
                    <Option value="china">英语一</Option>
                    <Option value="use">英语二</Option>
                  </Select>

                </FormItem>

                {/*关联咨询老师*/}
                <FormItem
                  {...formItemLayout}
                  label="关联咨询老师"
                  hasFeedback
                >
                  {getFieldDecorator('teacher', {
                    rules: [
                      { required: true, message: '请选择此课程关联的老师!' },
                    ],
                  })(
                    <Popover placement="bottom" title={text1} content={content1} trigger="click">
                      <Input placeholder="请选择此课程关联的老师" style={{width:'100%'}} >
                      </Input>
                    </Popover>
                  )}

                </FormItem>


                {/*招生截止时间*/}
                <FormItem
                  {...formItemLayout}
                  label="招生截止时间"
                  hasFeedback
                >
                  {getFieldDecorator('theTimeToStopRecruit ',  {rules: [{ type: 'object', required: true, message: 'Please select time!' }]})(
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                  )}
                  <span className="class-ant-form-text"> 在此时间前可以报名</span>
                </FormItem>

                {/*学习截止时间*/}
                <FormItem
                  {...formItemLayout}
                  label="学习截止时间"
                  hasFeedback
                >
                  {getFieldDecorator('theTimeToStopLearning',  {rules: [{ type: 'object', required: true, message: '请选择学习截止时间!' }]})(
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                  )}
                  <span className="class-ant-form-text"> 在此时间前可以学习</span>
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label="课程封面"
                  hasFeedback
                >
                  <div className="dropbox">
                    {getFieldDecorator('coverPic', {
                      valuePropName: 'fileList',
                      getValueFromEvent: this.normFile,
                    })(
                      <Upload.Dragger name="files" action="/upload.do">
                        <p className="ant-upload-drag-icon">
                          <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">点击或者拖拽图片进行上传</p>
                        <p className="ant-upload-hint">一次只能传一张图片</p>
                      </Upload.Dragger>
                    )}
                  </div>
                </FormItem>

                <FormItem
                  wrapperCol={{ span: 12, offset: 6 }}
                >
                  <div className="steps-action">
                    {
                      this.state.current < steps.length - 1
                      &&
                      <Button type="primary" htmlType="submit" onClick={() => this.next()}>下一步</Button>
                    }
                    {
                      this.state.current === steps.length - 1
                      &&
                      <Button type="primary"  htmlType="submit" onClick={() => message.success('Processing complete!')}>完成</Button>
                    }
                    {
                      this.state.current > 0
                      &&
                      <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                        上一步
                      </Button>
                    }
                  </div>

                </FormItem>
              </Form>
            </div>
          }
          {
            this.state.current  == 1
            &&
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>

              <Form onSubmit={this.handleSubmit2}>

                {/*详情介绍图片*/}
                <FormItem
                  {...formItemLayout}
                  label="详情介绍（图片）"
                  hasFeedback
                >
                  <div className="">
                    {getFieldDecorator('detailsPic', {
                      valuePropName: 'fileList',
                      getValueFromEvent: this.normFile,
                      rules: [{
                        required: true,
                        message: '上传详情介绍图片',
                      }],
                    })(
                      <Upload.Dragger name="files" action="/upload.do">
                        <p className="ant-upload-drag-icon">
                          <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">点击或者拖拽图片进行上传</p>
                        <p className="ant-upload-hint">一次只能传一张图片</p>
                      </Upload.Dragger>
                    )}
                  </div>
                </FormItem>

                {/*手风琴创建班级*/}
                <div style={{width:'75%',margin:'auto'}}>
                  <Collapse bordered={false} defaultActiveKey={['1']}>
                    {classPanels}
                  </Collapse>
                </div>

                {/*按钮集中放置区*/}
                <FormItem
                  wrapperCol={{ span: 12, offset: 6 }}
                >
                  <div className="steps-action">
                    {
                      this.state.current < steps.length - 1
                      &&
                      <Button type="primary" htmlType="submit" onClick={() => this.next()}>下一步</Button>
                    }
                    {
                      this.state.current === steps.length - 1
                      &&
                      <Button type="primary"  htmlType="submit" onClick={() => message.success('Processing complete!')}>完成</Button>
                    }
                    {
                      this.state.current > 0
                      &&
                      <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                        上一步
                      </Button>
                    }
                  </div>

                </FormItem>
              </Form>
            </div>
          }
          {
          this.state.current  == 2
          &&
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>

            <Collapse bordered={false} defaultActiveKey={['1']}>
              {chapterPanels}
            </Collapse>
            <div style={customPanelStyle}>
              <Button type="dashed" style={{width:'100%'}} onClick={this.addNewPanel}>+ 新增</Button>
            </div>
            <div style={customPanelStyle}>
              {
                this.state.current === steps.length - 1
                &&
                <Button type="primary" onClick={() => message.success('add!')}>保存</Button>
              }
              {
                this.state.current > 0
                &&
                <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                  上一步
                </Button>
              }
            </div>
          </div>
        }

        </Content>
      </div>
    )
  }
}

// 将props压缩到fields里，更新系列的信息
function mapPropsToFields(props) {
  console.log(props);
  return {

  }
}

export default Form.create({mapPropsToFields})(Class);
